자바스크립트의 이벤트는
이벤트를 발생시키는 경우(트리거 요소)를 구분하여 줍니다. 이때 가장 많이 사용되는
click 이벤트... 그리고 마우스 눌렀다가 뗄 경우 발생하는
mouseup 이벤트가 따로 존재하는데 이 둘의 차이점이 무엇인지 알아보겠습니다.
왜 이런 궁금증이 생기는가...??클릭 이벤트가 클릭을 하는 시점에서 발생하지 않고 마우스를 클릭 후 띄는 액션에 발생하기 때문에 두 가지 모두 동일해보이기 때문입니다. 단순하게(?) 생각해봐도 mouseup 이벤트 발생이 좀 더 효과적일 것으로 기대할 수 있으나 왜 그런지 ~ 무엇이 다른지 확실히 알 필요가 있을 것입니다.
일단 이 두 이벤트 함수를 나타내보면 아래와 같을 것입니다.
<script type="text/javascript">
/* 클릭 이벤트 함수 */
$('선택한 요소').on('click', function() {
...
});
/* 마우스업 이벤트 함수 */
$('선택한 요소').on('mouseup', function() {
...
});
</script>
결론부터 얘기하면 이 둘의 사용상에 있어 아주 큰 차이점은 찾기 어려운 것 같습니다. 이론적으로 접근하면 클릭 이벤트는 하나의 대상(Element)에 대하여 이벤트를 발생하기 위함일 수 있겠고 mouseup 또는 mousedown 이벤트의 경우
특정 요소와는 상관없이 오직 이벤트를 위해서 만들어졌다고 생각할 수 있을 것 같습니다.이 두 개념이 무엇이 맞다라고 말하기 어려운 이유 중 다른 하나가
바로 제이쿼리의 mouseup, mousedown, click 이벤트가 자바스크립트의 mouseup, mousedown, click과는 동일하다 볼 수 없기 때문입니다. 즉, jQuery api 명세에서 말하는 각각의 이벤트 설명이 자바스크립트를 의미한다 볼 수는 없는 것이지요. 하지만 대부분 이 둘을 혼동하고 설명하는 경우가 많습니다.